import React, { FC } from 'react'
import styled, { css } from 'styled-components'

const Container = styled.div`
  text-align: center;
`
type ButtonProps = {
  primary?: boolean
}
const Button = styled.button<ButtonProps>`
  background-color: blue;
  ${(props: ButtonProps) =>
    props.primary &&
    css`
      background-color: red;
    `}
`
const StyledComponentDemo: FC = () => {
  return (
    <>
      <Container>
        <Button>Click me</Button>
        <Button primary>Click me</Button>
      </Container>
    </>
  )
}

export default StyledComponentDemo
